<template>
  <view>
    <view class="order_detail">
      <view class="order_info">
        <view class="bottom">
          <view class="flex1">上线状态</view>
          <view class="order_no">
            <view class="status">{{ checked ? "上线中" : "下线中" }}</view>
            <van-switch :checked="checked" @change="onChange" size="24px" />
          </view>
        </view>
      </view>
      <div class="">
        <div class="title1">商家联系二维码(微信)</div>
        <van-uploader :file-list="fileList" @after-read="afterRead" :deletable=" true "  @before-read="beforeRead"/>
        <!-- <div class="content1">尺寸800*800px 大小不超过1M</div> -->
      </div>
      <view class="flex">
        <view class="flex1">单价(折扣)</view>
        <view class="order_no"></view>
      </view>
      <view class="flex">
        <view class="flex1">数量</view>
        <view class="order_no"></view>
      </view>
      <view class="flex">
        <view class="flex1">订单金额</view>
        <view class="order_no"></view>
      </view>
      <view class="flex">
        <view class="flex1">返佣</view>
        <view class="order_no"></view>
      </view>
      <view class="flex">
        <view class="flex1">营收</view>
        <view class="order_no"></view>
      </view>
      <view class="flex">
        <view class="flex1">下单时间</view>
        <view class="order_no"></view>
      </view>
      <view class="flex">
        <view class="flex1">支付时间</view>
        <view class="order_no"></view>
      </view>
    </view>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
const statusList = {
  0: "待付款",
  1: "待发货",
  2: "已发货",
  3: "交易完成",
  4: "售后",
  4: "交易取消",
};
const app = getApp();
import { fetchList, online_stat } from "../../utils/imapi";
export default {
  props: {},
  components: {},
  data() {
    return {
      good_info: {},
      statusList,
      checked: false,
      mch_info: {},
      fileList: [],
    };
  },
  computed: {},
  watch: {},
  onLoad(options) {
    console.log(app.globalData);
    this.mch_info = app.globalData.userinfo;
    console.log(this.mch_info);
    if (options.id) {
      const id = options.id;
      this.load_order_detail(id);
      return;
    }
    this.load_order_detail();
  },
  onReady() {},
  onShow() {},
  methods: {
    async load_order_detail(id) {
      try {
        const data = await fetchList({
          order_no: id || "",
        });
        if (data.code == 0) {
          this.good_info = data.data[0];
        }
      } catch (error) {}
    },
    onChange(e) {
      console.log(e.detail);
      this.checked = e.detail;
      if (e.detail) {
        this.online_stat(1);
      } else {
        this.online_stat(0);
      }
    },
    async online_stat(trade_status) {
      try {
        console.log(this.mch_info);
        const data = await online_stat({
          mch_code: this.mch_info.mch_code,
          trade_status,
        });
        console.log(data);
        console.log(data.data);
        if (data.code == 0) {
          this.$toast(data.msg);
        } else if (data.code == -1) {
          this.checked = !this.checked;
        }
      } catch (error) {
        console.log(error);
        //   this.$toast('操作失败,请稍后重试')
      }
    },
    afterRead(event) {
        const that = this
        console.log(event);
      const { file } = event.detail;
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      uni.uploadFile({
        url: "https://api.comm.t.xingkonglian.net:8098/api/v1/oss/upload_starx", // 仅为示例，非真实的接口地址
        filePath: file.url,
        name: "file",
        formData: { user: "test" },
        success(res) {
            console.log(res);
            console.log(file);
          // 上传完成需要更新 fileList
          console.log(res.data);
          const data= JSON.parse(res.data)
          console.log(data.data);
          that.fileList.push({  url: data.data });
          console.log(that.fileList);
        },
      });
    },
      beforeRead(event) {
          console.log(event);
    const { file, callback } = event.detail;
    console.log(file);
    callback(file.type === 'image');
  },
  },
  onReachBottom() {},
  onHide() {},
};
</script>

<style scoped lang="scss" scoped>
.mch_info {
  height: 192upx;
  width: 100%;
  border-top: 16upx solid #f0eefd;
  border-bottom: 16upx solid #f0eefd;
  padding-left: 32upx;
  padding-right: 32upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .userinfo {
    display: flex;
    align-items: center;
  }
  .avatar {
    width: 112upx;
    height: 112upx;
    border-radius: 50%;
    margin-right: 20upx;
  }
  .right {
    .mch_wx_name {
      margin-bottom: 16upx;
    }
  }
}
.order_status {
  font-size: 36upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727278;
}
.order_detail {
  width: 100%;
  padding-left: 32upx;
  padding-right: 44upx;
  font-size: 28upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0a0819;

  .order_info {
    border-bottom: 2upx solid #f0eefd;
    padding: 36upx 0 20upx;
    .top {
      display: flex;
      align-items: center;
    }
  }
}
.image {
  width: 160upx;
  height: 160upx;
  border-radius: 10upx;
  margin-right: 20upx;
}
.avatar1 {
  width: 160upx;
  height: 160upx;
  border-radius: 10upx;
}
.bottom {
  display: flex;
  align-items: center;
  margin-top: 20upx;
}
.flex1 {
  width: 160upx;
  margin-right: 20upx;
}
.flex {
  display: flex;
  align-items: center;
  height: 82upx;
  border-bottom: 2upx solid #f0eefd;
}
.order_no {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
